<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" width="1000px" @close="onClose">
    <el-form ref="ruleForm" :model="form" label-width="80px" label-position="left">
      <div class="body-context">
        <div class="body-context-quill">
          <quill-editor
            ref="myQuillEditor"
            v-model="form.context"
            :options="editorOption"
            @focus="onEditorFocus($event)"
          />
        </div>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { getOne } from '@/api/sysTemplate'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '查看模板',
      form: {
        id: '',
        name: '',
        fromClass: '',
        context: ''
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'align': [] }]
          ]
        }
      }
    }
  },
  methods:
    {
      init() {
        if (this.form.id) {
          getOne(this.form.id).then((res) => {
            if (res && res.code === 20000) {
              const rtn = res.data
              this.form.id = rtn.id
              this.form.name = rtn.name
              this.form.code = rtn.code
              this.form.fromClass = rtn.fromClass
              this.form.context = rtn.context
              this.title = this.form.code
            }
          })
        }
      },
      onShow(id) {
        if (id) {
          this.form.id = id
          this.init()
        }
        this.dialogVisible = true
      },
      onClose() {
        this.$refs['ruleForm'].resetFields()
        this.form = this.$options.data().form
        this.dialogVisible = false
      },
      onEditorFocus(event) {
        event.enable(false)
      }
    }
}
</script>

<style scoped>
.el-form {
  padding-left: 60px;
  padding-right: 60px;
  height: 300px;
}

li {
  margin-top: 8px;
  list-style: none;
  text-align: center;
}

.quill-editor {
  height: 200px;
}

.body-context {
  display: flex;
  flex-direction: column;
}

.body-context-tree {
  margin-bottom: 10px;
}

.body-context-tree > span > a {
  margin-left: 10px;
}

</style>
